<template>
  <div class="box">
      <div class="content">
        <div id="wrapper">
          <div class="line-wrap" style="margin-left: 70px;">
            <div id="item-1" class="state-item">Java基础</div>
            <div id="item-2" class="state-item">Java框架</div>
            <div id="item-3" class="state-item">前端技术</div>
            <div id="item-4" class="state-item">数据库技术</div>
            <div id="item-5" class="state-item">开源项目</div>
            <div id="item-6" class="state-item">不断学习</div>
          </div>

          <div class="block">
            <el-timeline>
              <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </div>
          <el-progress type="circle" :percentage="20"></el-progress>
<!--          <div class="line-wrap">-->
<!--            <div id="item-7" class="state-item2">语法</div>-->
<!--            <div id="item-8" class="state-item2">数据结构</div>-->
<!--            <div id="item-9" class="state-item2">面向对象</div>-->
<!--            <div id="item-10" class="state-item2">Spring</div>-->
<!--            <div id="item-11" class="state-item2">Hibernate</div>-->
<!--            <div id="item-12" class="state-item2">MyBatis</div>-->
<!--            <div id="item-13" class="state-item2">JavaScript</div>-->
<!--            <div id="item-14" class="state-item2">HTML&CSS</div>-->
<!--            <div id="item-15" class="state-item2">MySQL、Oracle</div>-->
<!--            <div id="item-16" class="state-item2">框架</div>-->
<!--            <div id="item-17" class="state-item2">新技术</div>-->
<!--          </div>-->
          <el-button type="primary" round>点我完成今日打卡</el-button>
          <img class="register-img images" src="src/assets/register.jpg" alt="注册">
      </div>
    </div>








  </div>

</template>

<script>
import {jsPlumb} from 'jsplumb'
export default {
  name: 'landing-page',
  data(){
    return{
      activities: [{
        content: 'java基础',
        timestamp: '1-2周',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: 'java框架',
        timestamp: '3-6周',
        color: '#0bbd87'
      }, {
        content: '前端',
        timestamp: '7-9周',
        size: 'large'
      }, {
        content: '数据库',
        timestamp: '第10周'
      }]
    }
  },
  mounted () {
    let plumbIns = jsPlumb.getInstance()
    plumbIns.ready(function () {
      plumbIns.connect({
        // 对应上述基本概念
        source: 'item-1',
        target: 'item-2',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
      // 添加样式
      paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
      // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
    })
      ,plumbIns.connect({
        // 对应上述基本概念
        source: 'item-2',
        target: 'item-3',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),
          plumbIns.connect({
            // 对应上述基本概念
            source: 'item-3',
            target: 'item-4',
            anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
            connector: ['StateMachine'],
            endpoint: 'Blank',
            overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
            // 添加样式
            paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
            // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
          })
          ,plumbIns.connect({
        // 对应上述基本概念
        source: 'item-4',
        target: 'item-5',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),
          plumbIns.connect({
            // 对应上述基本概念
            source: 'item-5',
            target: 'item-6',
            anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
            connector: ['StateMachine'],
            endpoint: 'Blank',
            overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
            // 添加样式
            paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
            // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
          })
          ,plumbIns.connect({
        // 对应上述基本概念
        source: 'item-7',
        target: 'item-8',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),plumbIns.connect({
        // 对应上述基本概念
        source: 'item-8',
        target: 'item-9',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      })
          ,plumbIns.connect({
        // 对应上述基本概念
        source: 'item-9',
        target: 'item-10',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),
          plumbIns.connect({
            // 对应上述基本概念
            source: 'item-10',
            target: 'item-11',
            anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
            connector: ['StateMachine'],
            endpoint: 'Blank',
            overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
            // 添加样式
            paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
            // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
          })
          ,plumbIns.connect({
        // 对应上述基本概念
        source: 'item-11',
        target: 'item-12',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),
          plumbIns.connect({
            // 对应上述基本概念
            source: 'item-12',
            target: 'item-13',
            anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
            connector: ['StateMachine'],
            endpoint: 'Blank',
            overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
            // 添加样式
            paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
            // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
          })
          ,plumbIns.connect({
        // 对应上述基本概念
        source: 'item-13',
        target: 'item-14',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),plumbIns.connect({
        // 对应上述基本概念
        source: 'item-14',
        target: 'item-15',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),plumbIns.connect({
        // 对应上述基本概念
        source: 'item-15',
        target: 'item-16',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),plumbIns.connect({
        // 对应上述基本概念
        source: 'item-16',
        target: 'item-17',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      }),plumbIns.connect({
        // 对应上述基本概念
        source: 'item-17',
        target: 'item-18',
        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
        connector: ['StateMachine'],
        endpoint: 'Blank',
        overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }] ], // overlay
        // 添加样式
        paintStyle: { stroke: '#ff00ff', strokeWidth: 2 }, // connector
        // endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
      })
    })
  }
}

</script>
<!--<script src="../js/login.js">-->

<!--</script>-->
<style >
#wrapper {
  background:
      radial-gradient(
          ellipse at top left,
          rgba(255, 255, 255, 1) 40%,
          rgba(229, 229, 229, .9) 100%
      );
  height: 100vh;
  padding: 60px 80px;
  width: 100vw;
  margin-top: 190px;
}
.state-item {
  width: 150px;
  height: 60px;
  color: #606266;
  background: #ccffff;
  border: 2px solid rgba(255, 0, 0, 0.05);
  text-align: center;
  line-height: 40px;
  font-family: sans-serif;
  border-radius: 4px;
  margin-right: 60px;

}
el-progress{
  float: right;
}
#item-1 {
  width: 150px;
  height: 60px;
  color: #606266;
  background: #99ff99;
  border: 2px solid rgba(255, 0, 0, 0.05);
  text-align: center;
  line-height: 40px;
  font-family: sans-serif;
  border-radius: 4px;
  margin-right: 60px;
}
.line-wrap {
  display: flex;
  margin-bottom: 40px;
}



* {
  margin: 0;
  padding: 0;
}
.item{
  height: 40px;
  width: 90px;
  float: right;
  /*font-size: 6px;*/
}
#title{
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
  font-size: 25px;

}
.box {
  background-color: rgb(51, 32, 108);
  width: 100vw;
  height: 100vh;
}
.box .content {
  width: 90vw;
  height: 85vh;
  background-color: rgb(228, 218, 232);
  border-radius: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 1s;
}
.box .content .images {
  margin-left: -150px;
  margin-right: 100px;
  position: absolute;
  left: 15%;
}
.box .content .login-img {
  width: 45%;
  height: 90%;
  border-radius: 15%;
}
.box .content .register-img {
  width: 45%;
  opacity: 0;
  border-radius: 15%;
}
.box .content .login-wrapper {
  width: 30vw;
  height: 80vh;
  border-radius: 40px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background: rgba(244, 240, 245, 0.6);
  padding: 60px;
  box-sizing: border-box;
  position: absolute;
  /*text-align: center;*/
  right: 10%;
  transition: 1s;
}
#false1{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false2{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false3{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false4{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false6{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false7{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
.box .content .login-wrapper .top-tips span:nth-child(1) {
  font-size: 25px;
  font-weight: 600;
}
.box .content .login-wrapper .top-tips .top-tips-span {

  color: rgb(0, 255, 255);
  /*border-bottom: 1px solid rgb(79, 133, 226);*/
  /*float: right;*/
  line-height: 25px;
  cursor: pointer;
}
.box .content .login-wrapper h1 {
  font-size: 45px;
  margin: 20px 0;
}
.box .content .login-wrapper .other-login {
  width: 60%;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  margin: 40px 0;
  background-color: rgb(79, 133, 226);
  padding-bottom: 2px;
  cursor: pointer;
}
.box .content .login-wrapper .other-login img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
.box .content .login-wrapper .other-login span {
  vertical-align: middle;
}
.box .content .login-wrapper .login-form,
.box .content .login-wrapper .register-form {
  text-align: center;
  width: 100%;
}
.box .content .login-wrapper .login-form .form-item .text-tips,
.box .content .login-wrapper .register-form .form-item .text-tips {
  color: rgb(123, 122, 123);
  margin: 5px;
}
.box .content .login-wrapper .login-form .form-item .text-tips .forgot-password,
.box .content .login-wrapper .register-form .form-item .text-tips .forgot-password {
  font-size: 15px;
  color: rgb(79, 133, 226);
  border-bottom: 1px solid rgb(79, 133, 226);
  float: right;
  line-height: 25px;
  cursor: pointer;
}
.box .content .login-wrapper .login-form .form-item input,
.box .content .login-wrapper .register-form .form-item input {
  width: 100%;
  height: 50px;
  margin: 5px 0;
  border-radius: 5px;
  border: 0;
  font-size: 17px;
  padding: 0 20px;
  box-sizing: border-box;
}
.box .content .login-wrapper .login-form .form-item input:focus,
.box .content .login-wrapper .register-form .form-item input:focus {
  outline: none;
  border: 1px solid rgb(79, 133, 226);
}
.box .content .login-wrapper .login-form .btn,
.box .content .login-wrapper .register-form .btn {
  width: 150px;
  height: 50px;
  margin: 20px 0;
  background-color: rgb(59, 58, 59);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.box .content .login-wrapper .login-form {
  display: block;
}
.box .content .login-wrapper .register-form {
  display: none;
}

.add-class-content {
  background-color: rgb(156, 148, 208) !important;
  transition: 0.1s;
}

.add-class-login-img {
  -webkit-animation: disappear 0.3s forwards;
  animation: disappear 0.3s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.add-class-login-img-show {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.add-class-register-img {
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }
  to {
    border-radius: 0%;
    opacity: 1;
  }
}

@keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }
  to {
    border-radius: 0%;
    opacity: 1;
  }
}
@-webkit-keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}/*# sourceMappingURL=style.css.map */


</style>

